<template>
  <page-frame>
    <div class="staff-main role" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">{{title}}</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="edit" v-show="editStatus">编辑</el-button>
            <el-button class="lightGreenBtn" @click="save('ruleForm')" v-show="!editStatus">保存</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="order-content">
            <div class="roleDescription">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="panel">
                  <div class="panel-title">
                    <el-row :gutter="100">
                      <el-col :span="6">
                        <div class="grid-content bg-purple">基本信息</div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="panel-content">
                    <el-form-item prop="roleName" label="职务名称" style="padding-left:20px;">
                      <el-col :span="8">
                        <el-input
                          placeholder="请输入职务名称"
                          :disabled = "roleNameStatus"
                          v-model="ruleForm.roleName"
                          class="roleInput">
                        </el-input>
                      </el-col>
                    </el-form-item>
                    <el-form-item  prop="description" style="padding-left:20px;">
                      <el-row :gutter="20">
                        <el-col :span="8">
                          <div class="input-item">
                            <label class="roleDes">职务描述</label>
                            <el-input
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入职务描述"
                              :disabled = "roleNameStatus"
                              v-model="ruleForm.description"
                              class="roleInput">
                            </el-input>
                          </div>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </div>
                </div>
                <div class="panel">
                  <div class="panel-title">
                    <el-row :gutter="100">
                      <el-col :span="6">
                        <div class="grid-content bg-purple">权限管理</div>
                      </el-col>
                    </el-row>
                  </div>
                  <div class="panel-content">
                    <!--<el-form-item prop="menusList">-->
                      <!--<div class="roleContainer">-->
                        <!--<el-row class="item" v-for="item in menusList" >-->
                          <!--<label class="labelName" v-model="item.name">{{item.name}}</label>-->
                          <!--<el-checkbox-group class="el-checkbox-group-inlineblock" v-model="menuList">-->
                            <!--<el-checkbox @change="checkBoxChange" v-for="childItem in item.childs" :label="childItem.id" :key="childItem.name" :disabled = "roleNameStatus">{{childItem.name}}</el-checkbox>-->
                          <!--</el-checkbox-group>-->
                        <!--</el-row>-->
                        <!--<p class="el-form-item__error warning" v-show="warningStatus">请选择至少一项</p>-->
                      <!--</div>-->
                    <!--</el-form-item>-->
                    <el-form-item prop="menusList">
                      <div class="roleContainer">
                        <el-row class="item" v-for="item in menusList" >
                          <label class="labelName" v-model="item.menuName">{{item.menuName}}</label>
                          <el-checkbox-group class="el-checkbox-group-inlineblock" v-model="menuList">
                            <el-checkbox @change="checkBoxChange" v-for="childItem in item.childMenus" :label="childItem.menuId" :key="childItem.menuName" :disabled = "roleNameStatus">{{childItem.menuName}}</el-checkbox>
                          </el-checkbox-group>
                        </el-row>
                        <p class="el-form-item__error warning" v-show="warningStatus">请选择至少一项</p>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
      </div>
    </div>
  </page-frame>
</template>


<script>
  import roleApi from '../../service/corporation/roleApi'
  export default {
    methods: {
      init(){
        this.loadTableData();
        this.getAllMenus();
      },
//      加载页面数据
      loadTableData(){
        if(this.$route.params.way == 0){//详情
          this.title = '职务详情';
          this.editStatus = true;
          this.operateBool = false;
          this.roleNameStatus = true;
          this.getRoleInfo(this.$route.params.id);
        }else if(this.$route.params.way == 1){//增加
          this.title = '新增职务';
          this.editStatus = false;
          this.operateBool = true;
          this.roleNameStatus = false;
        }else if(this.$route.params.way == 2){//编辑
          this.title = '编辑职务';
          this.editStatus = false;
          this.operateBool = true;
          this.roleNameStatus = false;
          this.getRoleInfo(this.$route.params.id);
        }
      },
//      根据roleId获得职务详情
      getRoleInfo(roleId){
        let self = this;
        roleApi.getRoleDetailByRoleId(roleId).then(
          (response)=>{
            self.ruleForm.roleName = response.data.data.role.name;
            self.ruleForm.description = response.data.data.role.description;
            self.menuList = response.data.data.menus;
            self.query.role.id = response.data.data.role.id;
          }
        );
      },
//      获取权限管理列表
      getAllMenus(){
        let self = this;
        roleApi.getAllMenus().then(
          (response)=>{
            self.menusList = response.data.data;
            self.ruleForm.menusArr = response.menusList;
          }
        );
      },
//      编辑
      edit(){
        let self = this;
        self.editStatus = false;
        self.roleNameStatus = false;
        self.title = '编辑职务';
      },
//      返回
      back(){
        this.$router.push({name: 'role'});
      },
//      保存
      save(formName){
        let self = this;self.query.role.name = self.ruleForm.roleName;
        self.query.role.description = self.ruleForm.description;
        self.query.menuIds = self.menuList;
        this.$refs[formName].validate((valid) => {
          if(self.query.menuIds.length==0){//未选择权限管理选项
            self.warningStatus = true;
            return false;
          }else{                          //选择权限管理选项
            self.warningStatus = false;
          }
          if (valid) {
            if(self.$route.params.way==1){//新增职务接口
              roleApi.addRole(self.query).then(
                (response)=>{
                  self.$message({
                    message: '新增职务成功',
                    type: 'success'
                  });
                  self.$router.push({name:"role"});
                }
              );
            }else if(self.$route.params.way==2||self.$route.params.way==0){//编辑职务接口
              //需要传入职务roleId
              roleApi.updateRoleDetail(self.query).then(
                (response)=>{
                  self.$message({
                    message: '编辑职务成功',
                    type: 'success'
                  });
                  self.$router.push({name:"role"});
                }
              );
            }
            } else {
              console.log('error submit!!');
              return false;
          }
        });
      },
//      权限管理选择框
      checkBoxChange(){
        if(this.menuList.length==0){
          this.warningStatus = true;
        }else{
          this.warningStatus = false;
        }
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        title:'新增职务',
        warningStatus:false,
        operateBool:true,
        roleNameStatus:false,
        editStatus:false,
        ruleForm: {
          roleName:'',
          description:'',
          menusArr:[],
        },
        rules: {
          roleName:[{ required: true, message: '请输入职务名称', trigger: 'blur' }],
        },
        menusList:[],
        menuList:[],
        query:{
          menuIds: [

          ],
          role: {
            description: "",
            id: null,
            name: "",
            no: "",
            parentId: 0,
            tenantId: 0
          }
        }
      }
    }
  }
</script>
<style>
  .staff-main .btns{
    float: right;
  }
  .container .input-item{
    margin-top: 30px;
  }
  .container input{
    display: inline-block;
  }
  .btns{
    float: right;
  }
  .el-dialog .input-item{
    margin:10px 0 15px 0;
  }
  .authorityManagement{
    padding-left:20px;
    padding-right:10px;
    margin-top:40px;
    height:50px;
    line-height:50px;
    background-color:#F9FAFC;
    font-size:28px;
  }
  @media screen and (max-width:1366px){
    .roleInput{
      width:77%!important;
    }
  }
  .item{
    margin-top:15px;
  }
  .roleDes{
    vertical-align:top;
  }
  .roleDescription{
  }
  .roleContainer{
    padding-left:20px;
  }
  .roleContainer .labelName{
    margin-right:15px;
  }
  .el-checkbox-group-inlineblock{
    display:inline-block;
  }
  .roleDescription .el-form-item__content{
    margin-left:0!important;
  }
  .roleDescription .el-form-item__content .input-item label{
    font-size:15px;
  }
  .role .el-form-item__label{
    margin-left:-35px;
    font-size:15px;
    font-weight:160;
    padding:11px 5px 11px 0;
  }
  .role .warning{
    padding-left:20px;
  }
</style>
